<%@ page  language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>排片管理页面</title>
    <%@ include file="../comm.jsp" %>
    <style>
        .roomBox{
            float:left;
            margin-left: 10px;
            margin-top: 10px;
        }
        .formBox{
            margin-top: 10px;
            border: solid 1px black;
            background: #fc9;
        }
        .over-flow{ overflow: auto; zoom: 1;}
    </style>
</head>
<body>
<h2 align="center" style="margin-bottom:20px;">${requestScope.valTime}的排片</h2>
<%--新加的模板--%>
<section id="copy" style="display: none">
    <div class="formBox over-flow" >
        <form class="save">
            <input type="submit" class="sub" style="display: none">
            <input type="hidden" name="time" value="${requestScope.valTime}">
            <%--影片下拉列表--%>
            <div >
                <label >选择影片:</label>
                <div>
                    <select name="filmId" >
                        <option value="">请选电影:</option>
                        <c:forEach var="film" items="${requestScope.playVO.filmList}">
                            <option value="${film.filmId}" >${film.filmName}</option>
                        </c:forEach>
                    </select>
                    <button style="margin-left: 900px" type="button"  class="delete">删除</button>
                </div>
            </div>
            <%--影厅排片信息--%>
            <div>
                <c:forEach items="${requestScope.playVO.roomList}" var="room">
                    <div class="roomBox">
                        <div>${room.room_name}</div>
                        <textarea cols="20" rows="10" name="msg"></textarea>
                    </div>
                </c:forEach>
            </div>
        </form>
    </div>
</section>
<%--内容区--%>
<section>
    <div id="all">
    <%--原有的排片渲染--%>
        <c:forEach items="${requestScope.playVO.editPlayList}" var="editPlay">
            <div class="formBox over-flow" id="${editPlay.film.filmId}">
                <form class="edit">
                    <input type="submit" class="sub" style="display: none">
                    <input type="hidden" name="time" value="${requestScope.valTime}">
                    <%--影片下拉列表--%>
                    <div >
                        <label >选择影片:</label>
                        <div>
                            <select name="filmId" >
                                <option value="">请选电影:</option>
                                <c:forEach var="film" items="${requestScope.playVO.filmList}">
                                    <c:if test="${editPlay.film.filmId == film.filmId}">
                                        <option value="${film.filmId}" selected="selected">${film.filmName}</option>
                                    </c:if>
                                    <c:if test="${editPlay.film.filmId != film.filmId}">
                                        <option value="${film.filmId}" >${film.filmName}</option>
                                    </c:if>
                                </c:forEach>
                            </select>
                            <button style="margin-left: 900px" type="button" onclick="toDelete(${editPlay.film.filmId})">删除</button>
                        </div>
                    </div>
                    <%--影厅排片信息--%>
                    <div>
                        <c:forEach items="${editPlay.editRoomList}" var="room">
                        <div class="roomBox">
                            <div>${room.room_name}</div>
                            <textarea cols="20" rows="10" name="msg"><c:forEach items="${room.playList}" var="play">${play.startime} ${play.price} &#10;</c:forEach></textarea>
                        </div>
                        </c:forEach>
                    </div>
                </form>
            </div>
        </c:forEach>
    </div>
    <%--操作按钮--%>
    <div>
        <button style="margin-left: 10px;margin-top: 5px" type="button" class="add">
            添加一行
        </button>
        <button style="margin-left: 300px;margin-top: 5px"  onclick="toPush()">
            发布
        </button>
    </div>
</section>
<script>
    let $ ;
    layui.use(['jquery','laypage','form'], function() {
        $ = layui.$ ;
        //初始化模板的提交事件，不然会把页面刷新
        $('.save').on('submit', function (){
            let formdata=new FormData(this);   // 通过这个表单构建FormData
            // 发送ajax请求（jQuery的ajax）
            $.ajax({
                url: 'savePlay',
                type: 'post',
                data: formdata,
                processData: false,   // 阻止jQuery处理数据
                contentType: false,  // 阻止修改contentType
                success:function (code){
                    if(code==-1){
                        layer.msg("格式错误",{icon:0})
                    }
                },
                error:function (){
                    layer.msg("网络错误",{icon:0})
                }
            });
            return false;    // 阻止表单自己提交
        });
        //添加新的电影排片
        $('.add').click(function (){
            $('#all').append($('#copy').html());
            $('.delete').click(function (){
                $(this).parent().parent().parent().parent().remove();
            });
            //保存电影排片
            $('.save:last').on('submit', function (){
                let formdata=new FormData(this);   // 通过这个表单构建FormData
                // 发送ajax请求（jQuery的ajax）
                $.ajax({
                    url: 'savePlay',
                    type: 'post',
                    data: formdata,
                    processData: false,   // 阻止jQuery处理数据
                    contentType: false, // 阻止修改contentType
                    success:function (code){
                        if(code==-1){
                            layer.msg("格式错误",{icon:0})
                        }
                    },
                    error:function (){
                        layer.msg("网络错误",{icon:0})
                    }
                });
                return false;    // 阻止表单自己提交
            });
        });
        //编辑排片提交
        $('.edit').on('submit', function (){
            let formdata=new FormData(this);   // 通过这个表单构建FormData
            // 发送ajax请求（jQuery的ajax）
            $.ajax({
                url: 'editPlay',
                type: 'post',
                data: formdata,
                processData: false,   // 阻止jQuery处理数据
                contentType: false,   // 阻止修改contentType
                success:function (code){
                    if(code==-1){
                        layer.msg("格式错误",{icon:0})
                    }
                },
                error:function (){
                    layer.msg("网络错误",{icon:0})
                }
            });
            return false;    // 阻止表单自己提交
        });
    });
    //发布触发全部提交
    function toPush() {
        $('.sub').click();
        window.setTimeout(function (){
            window.location.href="toPlay?valTime=${requestScope.valTime}"
        },1000);
    }
    //删除已有的排片
    function toDelete(filmId){
        //删除该天，该电影的所有排片，（该影院，可以通过session的user）
        $.get("deleteDatePlay",{
            valTime:'${requestScope.valTime}',
            filmId:filmId
        },function (code){
            if(code!=null){
                layer.msg('删除成功',{icon:1})
                let name = '#'+filmId;
                $(name).remove();
            }else {
                layer.msg('删除失败，联系管理人员',{icon:0})
            }
        })
    }
</script>
</body>
</html>